<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Animate Along</title>
		<script type="text/javascript" src="../../Mr&Ms.js"></script>
		<script type="text/javascript" src="../Mr.graph.js"></script>
		<script type="text/javascript">
			Mr(function(){
				var div = document.getElementById('chart');
				var log = document.getElementById('log');
				var graph = Mr.graph(500, 500);				
				graph.appendTo(div);
				
				var title = graph.text(155, 300, null, null, 'Prowered by Mr.Graph.js').attr({ fill : '#fff', 'font-family' : 'verdana' });	
				
				var cx = 250, cy = 250, innerRadius = 130, centerRadius = 10, pointCnt = 16;
				var pathStr = Mr.strFormat('M {0} {1} ', cx, cy - innerRadius);
				for(var i = 1 ; i <= pointCnt ; i++){
					var pos1 = Mr.getPosAroundXY(cx, cy, innerRadius + 100, (2 * i - 1) / pointCnt / 2);
					var pos2 = Mr.getPosAroundXY(cx, cy, innerRadius, i / pointCnt);
					pathStr += Mr.strFormat('Q {0} {1} {2} {3} ', pos1.x, pos1.y, pos2.x, pos2.y);
				}
				
				var path = graph.path(pathStr).attr({ id : 'myPath', 'stroke-linejoin' : 'round', stroke : 'greenyellow', 'stroke-width' : '5', fill : 'none' });
				var joinLine = graph.path(Mr.strFormat('M {0} {1} L {2} {3}', cx, cy, cx, cy - innerRadius)).attr({ stroke : '#fff', 'stroke-width' : '3' });
				var center = graph.circle(cx, cy, centerRadius).attr({ stroke : '#fff', fill : 'greenyellow', 'stroke-width' : '3' });
				
				var mover = 
					graph.ellipse(cx, cy, centerRadius + 3, centerRadius - 2).attr({ stroke : 'none', fill : 'red' })
						.jsAnimateMotion({
							path : path,
							rotation : 'auto',
							dur : 20 * 1000,
							repeatCount : 'indefinite',
							funcs : {
								onupdate : function(pos){
									joinLine.setSubPathPoints(1, {
										x : pos.x, y : pos.y
									});
								}
							}
						});
			});
		</script>
	</head>
	<body style="background:#444;margin:0;">
		<div id="chart" style="width:500px;height:500px;margin:0 auto;"></div>
		<div id="log" style="color:#fff;position:absolute;top:0;left:0;"></div>
	</body>
</html>